<template>
	<view>
		<scroll-view scroll-y="true" class="content" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="container">
				<view class="address-form mt10">
					<u--form labelPosition="left" labelWidth="80" errorType="toast" labelStyle="{'text-align': 'justify'}"
						:model="addressModel" :rules="addressRules" ref="addressRef">
						<u-form-item label="姓名" prop="receiverName" borderBottom>
							<u--input v-model="addressModel.receiverName" placeholder="请输入姓名" border="none"></u--input>
						</u-form-item>
						<u-form-item label="手机号" prop="receiverPhone" borderBottom>
							<u--input v-model="addressModel.receiverPhone" placeholder="请输入手机号" border="none"></u--input>
						</u-form-item>
						<u-form-item label="所在地区" prop="" borderBottom>
							<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
								<view class="regionName2" v-if="regionName">{{regionName}}</view>
								<view class="regionName" v-else>请选择省市区</view>
							</pick-regions>
						</u-form-item>
						<u-form-item label="详细地址" prop="detailAdress" borderBottom>
							<u--textarea v-model="addressModel.detailAdress" placeholder="请输入详细地址" border="none"></u--textarea>
						</u-form-item>
						<view class="d-flex j-sb mt15">
							<view>设为默认地址</view>
							<view>
								<u-switch v-model="addressModel.isDefault" @change="switchChange()"></u-switch>
							</view>
						</view>
					</u--form>
				</view>

				<view class="add_address_box d-flex j-center a-center mt20">
					<view class="add_address">
						<u-button color="#77C7A2" text="保存" @click="formSubmit()"></u-button>
					</view>
				</view>

				<u-toast ref="uToast"></u-toast>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
	import {
		queryAddressOneByApp,
		updateAddressByApp
	} from "@/api/index.js"
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				addressCode: "",
				addressModel: {
					receiverName: "",
					receiverPhone: "",
					receiverArea: "",
					detailAdress: "",
					isDefault: false
				},
				addressRules: {
					receiverName: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					receiverPhone: [{
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					detailAdress: {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
				},

				delta: 1,
				region: [],
				regionName: "",
				defaultRegionCode: ''
			};
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.addressRef.setRules(this.addressRules)
		},

		onLoad: function(options) {
			this.delta = options.delta;
			this.addressCode = options.addressCode;

			this.queryAddressOneByApp();
		},
		computed: {
			// regionName() {
			// 	// 转为字符串
			// 	return this.region.map(item => item.name).join(' ')
			// }
		},
		methods: {
			queryAddressOneByApp() {
				queryAddressOneByApp({
					addressCode: this.addressCode
				}).then(res => {
					const object = res.object
					this.addressModel.receiverName = object.receiverName
					this.addressModel.receiverPhone = object.receiverPhone
					this.regionName = object.receiverArea
					this.defaultRegionCode = object.areaCode
					this.addressModel.detailAdress = object.detailAdress
					this.addressModel.isDefault = object.isDefault == 0 ? true : false
				})
			},
			// 获取地址
			handleGetRegion(region) {
				this.region = region
				this.regionName = region.map(item => item.name).join(' ')
				this.defaultRegionCode = region[region.length - 1].code
			},
			switchChange() {},

			formSubmit(e) {
				let that = this;
				if (!that.region || !that.defaultRegionCode) {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					});
					return
				}

				that.$refs.addressRef.validate().then(res => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					updateAddressByApp({
						addressCode: this.addressCode,
						receiverName: that.addressModel.receiverName,
						receiverPhone: that.addressModel.receiverPhone,
						receiverArea: that.regionName,
						areaCode: that.defaultRegionCode,
						detailAdress: that.addressModel.detailAdress,
						isDefault: that.addressModel.isDefault == true ? 0 : 1
					}).then(res => {
						if (res.status == '200') {
							uni.hideLoading()
							that.$refs.uToast.show({
								type: "success",
								duration: "500",
								message: res.message,
								complete() {
									uni.navigateBack({
										delta: parseInt(that.delta)
									})
								}
							})
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
		}
	};
</script>

<style lang="scss" scopeds>
	page {
		// background-color: #F2F2F2
	}

	.content {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F5F5F5;
		height: 100vh;

		.address-form {
			width: 700rpx;
			height: 650rpx;
			background: #FFF;
			box-sizing: border-box;
			border-radius: 16rpx;
			padding: 32rpx;

			.u-textarea {
				padding: 0 !important;
			}

			.regionName {
				color: #c0c4cc;
				font-size: 15px;
			}

			.regionName2 {
				color: #333333;
				font-size: 15px;
			}
		}

		.add_address_box {
			width: 100%;

			.add_address {
				width: 85%;
				color: #FFFFFF;
				line-height: 70rpx;
				border-radius: 35rpx;
			}
		}
	}
</style>